<template>
<div :class="[$style.container]" @keyup.enter="onConfirm">
<el-dialog title="文档授权" :visible.sync="actualVisible" width="60%">
  <div v-if="actualVisible">
    <el-tabs v-model="value">
      <el-tab-pane label="当前目录授权" name="current">
        <doc-authorize-chooser v-model="rows" :class="[$style.content]" :loading="loading"></doc-authorize-chooser>
      </el-tab-pane>
      <!-- <el-tab-pane label="继承至上级目录授权" name="inherit"><div :class="[$style.content]">todo</div></el-tab-pane> -->
    </el-tabs>
  </div>
  <span slot="footer">
    <el-button size="small" :disabled="submitting" @click="onCancel" class="px-5">取 消</el-button>
    <el-button size="small" type="primary" @click="onConfirm" :loading="submitting" class="px-5">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script lang="ts">

import { ModalMixins } from '@/mixins'
import { Vue, Component, Prop, Emit, Ref } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import DocAuthorizeChooser from './doc-authorize-chooser/index.vue'
import { batchUpdateByDoc, queryAclByDoc } from '@/api/acl'

@Component({
  components: { DocAuthorizeChooser }
})
export default class DocAuthorizeModal extends mixins(ModalMixins) {
  data: any = null

  value: 'current' | 'inherit' = 'current'

  rows: any[] = []

  loading = false

  open (data: any) {
    this.data = data
    this.value = 'current'
    this.loadData()
    return this.init()
  }

  onCancel () {
    this.cancel()
  }

  onConfirm () {
    this.submitting = true
    batchUpdateByDoc(this.data?.id, this.rows).then(data => {
      this.visible = false
      if (this.resolve) this.resolve()
    }).finally(() => {
      this.submitting = false
    })
  }

  loadData () {
    if (!this.data) return
    this.loading = true
    queryAclByDoc(this.data?.id).then(data => {
      this.rows = (data || []).map((v: any) => Object.assign(v, { _id: `${v.ownType}-${v.ownId}` }))
    }).finally(() => {
      this.loading = false
    })
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

.content {
  height: calc(100vh - 15vh - 50px - 54px - 40px - 62px - 80px);
}

</style>
